/*
 * @Author: tomystery 
 * @Date: 2018-05-31 16:51:14 
 * @Last Modified by: t
 * @Last Modified time: 2018-07-15 17:53:27
 */
import React from 'react';
import { Link } from 'react-router-dom';

import PageTitle from 'component/page-title/index.jsx';
import Pagination from 'util/pagination/index.jsx';

import MUtil from 'util/mm.jsx';
import Order from 'service/order-service.jsx';
import ListSearch from './index-list-search.jsx'
import './index.scss'


const _mm = new MUtil();
const _order = new Order();
class OrderList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1,
            orderNo: ''
        }
    }
    componentDidMount() {
        this.loadOrderList()
    }
    //加载商品列表
    loadOrderList() {
        let listParam = {};
        listParam.pageNum = this.state.pageNum;
        listParam.orderNo = this.state.orderNo;
        
        //请求接口
        _order.getOrderList(listParam).then(res => {
            this.setState(res, () => {
                this.setState({
                    list: res.list
                })
            })
        }, errMsg => {
            _mm.errTips(errMsg);
        });
    }

    //页数发生变化
    changePageNum(pageNum) {
        this.setState({ pageNum: pageNum }, () => {
            this.loadOrderList();
        })

    }

    onSearch(orderNumber) {
        this.setState({
            pageNum: 1,
            orderNo: orderNumber
        }, () => {
            this.loadOrderList();
        })

    }

    render() {
        let tableHeads = ['订单号', '收件人', '订单状态', '订单总价', '创建时间', '操作']
        let tableList = this.state.list.map((order, index) => {
            return <tr key={index}>
                <td>{order.orderNo}</td>
                <td>{order.receiverName}</td>
                <td> {order.statusDesc}</td>
                <td>¥{order.payment}</td>
                <td>{order.createTime}</td>
                <td className='clear-fix'>
                    <Link style={{marginLeft:'8px'}} className='product-detail' to={`/order-detail/${order.orderNo}`}>查看</Link>
                </td>
            </tr>
        })
       
        return (
            <div id='page-wrapper'>

                <div className='row'>
                    <div className='col-md-12'>
                        <PageTitle title='订单管理' />
                    </div>
                </div>
                <ListSearch onSearch={(orderNumber) => this.onSearch(orderNumber)} />
                <div className='row'>
                    <div className='col-md-12'>
                        <table className='table table-striped table-bordered'>
                            <thead>
                                <tr>
                                    {tableHeads.map((item, index) => {
                                        return <th key={index}>{item}</th>

                                    })}
                                </tr>
                            </thead>
                            <tbody>
                                {tableList}

                            </tbody>
                        </table>
                        <Pagination current={this.state.pageNum} total={this.state.total} onChange={(pageNum) => this.changePageNum(pageNum)} />
                    </div>
                </div>


            </div>
        )
    }
}

export default OrderList